<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube订阅管理器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .header .status {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }
        
        .status-dot {
            width: 8px;
            height: 8px;
            background: #4ade80;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .main-content {
            display: flex;
            gap: 20px;
        }
        
        .sidebar {
            width: 280px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            height: fit-content;
        }
        
        .content-area {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .category-section h3 {
            margin-bottom: 15px;
            color: #333;
            font-size: 18px;
        }
        
        .category-list {
            list-style: none;
        }
        
        .category-item {
            padding: 12px 16px;
            margin-bottom: 8px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .category-item:hover {
            background: #f8fafc;
        }
        
        .category-item.active {
            background: #e0f2fe;
            border-left: 4px solid #0284c7;
        }
        
        .category-count {
            background: #e5e7eb;
            color: #6b7280;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .active .category-count {
            background: #0284c7;
            color: white;
        }
        
        .filters {
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .search-box {
            flex: 1;
            min-width: 200px;
            padding: 10px 15px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        
        .search-box:focus {
            outline: none;
            border-color: #0284c7;
        }
        
        .filter-select {
            padding: 8px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            background: white;
            font-size: 14px;
            cursor: pointer;
        }
        
        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .video-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }
        
        .video-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        
        .video-thumbnail {
            width: 100%;
            height: 180px;
            background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            font-size: 14px;
        }
        
        .video-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .video-info {
            padding: 15px;
        }
        
        .video-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .video-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #6b7280;
        }
        
        .channel-name {
            font-weight: 500;
            color: #374151;
        }
        
        .video-stats {
            display: flex;
            gap: 10px;
        }
        
        .new-badge {
            background: #ef4444;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
        }
        
        .toolbar {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .toolbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .toolbar-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background: #0284c7;
            color: white;
        }
        
        .btn-primary:hover {
            background: #0369a1;
        }
        
        .btn-secondary {
            background: #f3f4f6;
            color: #374151;
        }
        
        .btn-secondary:hover {
            background: #e5e7eb;
        }
        
        .category-management {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
        }
        
        .add-category {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .add-category input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .update-time {
            font-size: 12px;
            color: #6b7280;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>YouTube订阅管理器</h1>
            <div class="status" id="headerStatus">
                <div class="status-dot"></div>
                <span>已连接 YouTube 账户 | 100个订阅频道 | 最后更新: 2分钟前</span>
            </div>
        </div>
        
        <!-- 未授权状态提示 -->
        <div class="header-auth" id="authWarning" style="display: none;">
            <div class="auth-warning">
                <span class="auth-warning-icon">⚠️</span>
                <span>请先连接你的YouTube账户以开始使用</span>
            </div>
            <button class="btn btn-primary" onclick="showAuthModal()">立即连接</button>
        </div>
        
        <div class="main-content">
            <div class="sidebar">
                <div class="category-section">
                    <h3>频道分类</h3>
                    <ul class="category-list">
                        <li class="category-item active" data-category="tech">
                            <span>🔬 科技</span>
                            <span class="category-count">23</span>
                        </li>
                        <li class="category-item" data-category="entertainment">
                            <span>🎬 娱乐</span>
                            <span class="category-count">18</span>
                        </li>
                        <li class="category-item" data-category="sports">
                            <span>⚽ 体育</span>
                            <span class="category-count">12</span>
                        </li>
                        <li class="category-item" data-category="education">
                            <span>📚 教育</span>
                            <span class="category-count">15</span>
                        </li>
                        <li class="category-item" data-category="lifestyle">
                            <span>🌟 生活</span>
                            <span class="category-count">20</span>
                        </li>
                        <li class="category-item" data-category="uncategorized">
                            <span>📂 未分类</span>
                            <span class="category-count">12</span>
                        </li>
                    </ul>
                </div>
                
                <div class="category-management">
                    <h3>管理分类</h3>
                    <div class="add-category">
                        <input type="text" placeholder="添加新分类..." id="newCategoryInput">
                        <button class="btn btn-primary" onclick="addCategory()">添加</button>
                    </div>
                    <button class="btn btn-secondary" onclick="openChannelManager()">管理频道分类</button>
                </div>
            </div>
            
            <div class="content-area">
                <div class="toolbar">
                    <div class="toolbar-left">
                        <h2>科技类视频 (23个频道)</h2>
                    </div>
                    <div class="toolbar-right">
                        <span class="update-time">10分钟前更新</span>
                        <button class="btn btn-secondary" onclick="refreshContent()">刷新</button>
                        <button class="btn btn-secondary" onclick="logout()" title="断开连接">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                                <polyline points="16,17 21,12 16,7"/>
                                <line x1="21" y1="12" x2="9" y2="12"/>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <div class="filters">
                    <input type="text" class="search-box" placeholder="搜索视频标题关键词..." id="searchInput">
                    <select class="filter-select" id="timeFilter">
                        <option value="all">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                    </select>
                    <select class="filter-select" id="durationFilter">
                        <option value="all">全部时长</option>
                        <option value="short">短视频 (<4分钟)</option>
                        <option value="medium">中等 (4-20分钟)</option>
                        <option value="long">长视频 (>20分钟)</option>
                    </select>
                    <select class="filter-select" id="sortFilter">
                        <option value="newest">最新发布</option>
                        <option value="popular">最多观看</option>
                        <option value="channel">按频道</option>
                    </select>
                </div>
                
                <div class="video-grid" id="videoGrid">
                    <!-- 视频卡片将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 授权模态框 -->
    <div id="authModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="auth-container">
                <div class="auth-header">
                    <h2>连接你的YouTube账户</h2>
                    <p>授权后我们将获取你的订阅列表，帮你更好地管理内容</p>
                </div>
                
                <div class="auth-steps">
                    <div class="step">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h4>安全授权</h4>
                            <p>通过Google官方OAuth安全登录</p>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h4>同步订阅</h4>
                            <p>获取你的YouTube订阅列表</p>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h4>开始管理</h4>
                            <p>为频道分类，高效浏览内容</p>
                        </div>
                    </div>
                </div>
                
                <div class="auth-permissions">
                    <h4>我们需要的权限：</h4>
                    <ul class="permission-list">
                        <li><span class="permission-icon">✓</span> 查看你的YouTube订阅列表</li>
                        <li><span class="permission-icon">✓</span> 获取订阅频道的最新视频</li>
                        <li><span class="permission-icon">✗</span> 不会访问你的观看历史</li>
                        <li><span class="permission-icon">✗</span> 不会代你进行任何操作</li>
                    </ul>
                </div>
                
                <div class="auth-buttons">
                    <button class="btn btn-google" onclick="startAuth()">
                        <svg width="18" height="18" viewBox="0 0 24 24">
                            <path fill="#4285f4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                            <path fill="#34a853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                            <path fill="#fbbc05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                            <path fill="#ea4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                        </svg>
                        使用Google账户登录
                    </button>
                    <p class="auth-note">登录即表示同意我们的 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载状态模态框 -->
    <div id="loadingModal" class="modal" style="display: none;">
        <div class="modal-content loading-content">
            <div class="loading-spinner"></div>
            <h3>正在同步你的订阅数据...</h3>
            <p class="loading-text">这可能需要几分钟时间，请耐心等待</p>
            <div class="loading-progress">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <p class="progress-text">已同步 <span id="syncProgress">0</span>/100 个频道</p>
            </div>
        </div>
    </div>

    <style>
        .modal {
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        .auth-container {
            padding: 40px;
        }
        
        .auth-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .auth-header h2 {
            color: #1f2937;
            margin-bottom: 10px;
        }
        
        .auth-header p {
            color: #6b7280;
            font-size: 14px;
        }
        
        .auth-steps {
            margin-bottom: 30px;
        }
        
        .step {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            background: #e0f2fe;
            color: #0284c7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .step-content h4 {
            margin-bottom: 5px;
            color: #1f2937;
        }
        
        .step-content p {
            color: #6b7280;
            font-size: 14px;
            margin: 0;
        }
        
        .auth-permissions {
            background: #f9fafb;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 30px;
        }
        
        .auth-permissions h4 {
            margin-bottom: 15px;
            color: #1f2937;
        }
        
        .permission-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .permission-list li {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .permission-icon {
            width: 20px;
            margin-right: 10px;
            font-weight: 600;
        }
        
        .permission-list li:nth-child(1) .permission-icon,
        .permission-list li:nth-child(2) .permission-icon {
            color: #10b981;
        }
        
        .permission-list li:nth-child(3) .permission-icon,
        .permission-list li:nth-child(4) .permission-icon {
            color: #ef4444;
        }
        
        .auth-buttons {
            text-align: center;
        }
        
        .btn-google {
            background: white;
            border: 2px solid #e5e7eb;
            color: #374151;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            transition: all 0.2s;
        }
        
        .btn-google:hover {
            border-color: #d1d5db;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .auth-note {
            margin-top: 15px;
            font-size: 12px;
            color: #6b7280;
        }
        
        .auth-note a {
            color: #0284c7;
            text-decoration: none;
        }
        
        .loading-content {
            padding: 40px;
            text-align: center;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #e5e7eb;
            border-top: 4px solid #0284c7;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading-text {
            color: #6b7280;
            margin-bottom: 30px;
        }
        
        .loading-progress {
            max-width: 300px;
            margin: 0 auto;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e5e7eb;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #0284c7, #0ea5e9);
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }
        
        .header-auth {
            background: #fef3c7;
            color: #92400e;
            padding: 12px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .auth-warning {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .auth-warning-icon {
            color: #f59e0b;
        }
    </style>

    <script>
        // 应用状态
        let isAuthenticated = false;
        let authProgress = 0;
        
        // 模拟视频数据
        const sampleVideos = {
            tech: [
                {
                    title: "iPhone 15 Pro Max 深度评测：AI功能全面解析",
                    channel: "科技美学",
                    duration: "15:23",
                    views: "125万",
                    uploadTime: "2小时前",
                    isNew: true
                },
                {
                    title: "OpenAI GPT-4.5 发布会完整回顾",
                    channel: "极客公园",
                    duration: "28:45",
                    views: "89万",
                    uploadTime: "5小时前",
                    isNew: true
                },
                {
                    title: "2024年最值得买的Android手机推荐",
                    channel: "ZEALER",
                    duration: "12:18",
                    views: "67万",
                    uploadTime: "1天前",
                    isNew: false
                },
                {
                    title: "特斯拉FSD beta最新测试：完全自动驾驶还有多远？",
                    channel: "38号车评中心",
                    duration: "20:56",
                    views: "156万",
                    uploadTime: "2天前",
                    isNew: false
                },
                {
                    title: "量子计算机突破：谷歌实现量子优势",
                    channel: "回形针PaperClip",
                    duration: "18:32",
                    views: "234万",
                    uploadTime: "3天前",
                    isNew: false
                },
                {
                    title: "芯片战争：中美科技竞争的核心战场",
                    channel: "混乱博物馆",
                    duration: "35:47",
                    views: "445万",
                    uploadTime: "4天前",
                    isNew: false
                }
            ]
        };

        // 当前选中的分类
        let currentCategory = 'tech';
        let filteredVideos = sampleVideos[currentCategory] || [];

        // 初始化页面
        function init() {
            // 检查授权状态
            checkAuthStatus();
            if (isAuthenticated) {
                renderVideos();
                setupEventListeners();
            } else {
                showAuthRequired();
            }
        }
        
        // 检查授权状态
        function checkAuthStatus() {
            // 在实际应用中，这里会检查本地存储的token或向后端验证
            const hasAuth = localStorage.getItem('youtube_auth_token');
            isAuthenticated = !!hasAuth;
        }
        
        // 显示需要授权的状态
        function showAuthRequired() {
            document.getElementById('headerStatus').style.display = 'none';
            document.getElementById('authWarning').style.display = 'flex';
            document.querySelector('.main-content').style.opacity = '0.3';
            document.querySelector('.main-content').style.pointerEvents = 'none';
            
            // 自动弹出授权窗口
            setTimeout(() => {
                showAuthModal();
            }, 1000);
        }
        
        // 显示授权模态框
        function showAuthModal() {
            document.getElementById('authModal').style.display = 'flex';
        }
        
        // 开始授权流程
        function startAuth() {
            document.getElementById('authModal').style.display = 'none';
            document.getElementById('loadingModal').style.display = 'flex';
            
            // 模拟授权和同步过程
            simulateAuthProcess();
        }
        
        // 模拟授权过程
        function simulateAuthProcess() {
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    setTimeout(completeAuth, 500);
                }
                updateProgress(progress);
            }, 300);
        }
        
        // 更新进度
        function updateProgress(progress) {
            document.getElementById('progressFill').style.width = progress + '%';
            document.getElementById('syncProgress').textContent = Math.floor(progress);
        }
        
        // 完成授权
        function completeAuth() {
            // 保存授权状态
            localStorage.setItem('youtube_auth_token', 'mock_token_' + Date.now());
            isAuthenticated = true;
            
            // 隐藏加载模态框
            document.getElementById('loadingModal').style.display = 'none';
            
            // 更新UI状态
            document.getElementById('headerStatus').style.display = 'flex';
            document.getElementById('authWarning').style.display = 'none';
            document.querySelector('.main-content').style.opacity = '1';
            document.querySelector('.main-content').style.pointerEvents = 'auto';
            
            // 初始化主要功能
            renderVideos();
            setupEventListeners();
            
            // 显示成功提示
            showSuccessMessage();
        }
        
        // 显示成功消息
        function showSuccessMessage() {
            const message = document.createElement('div');
            message.innerHTML = `
                <div style="position: fixed; top: 20px; right: 20px; background: #10b981; color: white; 
                           padding: 15px 20px; border-radius: 8px; z-index: 1001; box-shadow: 0 4px 16px rgba(0,0,0,0.2);">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span>✅</span>
                        <span>授权成功！已同步100个订阅频道</span>
                    </div>
                </div>
            `;
            document.body.appendChild(message);
            
            setTimeout(() => {
                message.remove();
            }, 3000);
        }
        
        // 登出功能
        function logout() {
            if (confirm('确定要断开YouTube账户连接吗？')) {
                localStorage.removeItem('youtube_auth_token');
                isAuthenticated = false;
                location.reload();
            }
        }

        // 渲染视频列表
        function renderVideos() {
            const videoGrid = document.getElementById('videoGrid');
            videoGrid.innerHTML = '';
            
            filteredVideos.forEach(video => {
                const videoCard = createVideoCard(video);
                videoGrid.appendChild(videoCard);
            });
        }

        // 创建视频卡片
        function createVideoCard(video) {
            const card = document.createElement('div');
            card.className = 'video-card';
            card.onclick = () => openVideo(video);
            
            card.innerHTML = `
                <div class="video-thumbnail">
                    <span>视频缩略图</span>
                    <div class="video-duration">${video.duration}</div>
                </div>
                <div class="video-info">
                    <div class="video-title">${video.title}</div>
                    <div class="video-meta">
                        <div>
                            <div class="channel-name">${video.channel}</div>
                            <div class="video-stats">
                                <span>${video.views}次观看</span>
                                <span>•</span>
                                <span>${video.uploadTime}</span>
                                ${video.isNew ? '<span class="new-badge">NEW</span>' : ''}
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            return card;
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 分类切换
            document.querySelectorAll('.category-item').forEach(item => {
                item.addEventListener('click', () => {
                    document.querySelectorAll('.category-item').forEach(i => i.classList.remove('active'));
                    item.classList.add('active');
                    currentCategory = item.dataset.category;
                    updateContent();
                });
            });

            // 搜索功能
            document.getElementById('searchInput').addEventListener('input', (e) => {
                filterVideos();
            });

            // 筛选器
            ['timeFilter', 'durationFilter', 'sortFilter'].forEach(id => {
                document.getElementById(id).addEventListener('change', filterVideos);
            });
        }

        // 筛选视频
        function filterVideos() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const timeFilter = document.getElementById('timeFilter').value;
            const durationFilter = document.getElementById('durationFilter').value;
            const sortFilter = document.getElementById('sortFilter').value;

            let videos = sampleVideos[currentCategory] || [];

            // 应用搜索筛选
            if (searchTerm) {
                videos = videos.filter(video => 
                    video.title.toLowerCase().includes(searchTerm) ||
                    video.channel.toLowerCase().includes(searchTerm)
                );
            }

            // 应用时间筛选
            if (timeFilter !== 'all') {
                videos = videos.filter(video => {
                    if (timeFilter === 'today') return video.uploadTime.includes('小时前');
                    if (timeFilter === 'week') return video.uploadTime.includes('天前') && parseInt(video.uploadTime) <= 7;
                    if (timeFilter === 'month') return video.uploadTime.includes('天前') && parseInt(video.uploadTime) <= 30;
                    return true;
                });
            }

            // 应用时长筛选
            if (durationFilter !== 'all') {
                videos = videos.filter(video => {
                    const duration = video.duration.split(':');
                    const minutes = parseInt(duration[0]) + parseInt(duration[1]) / 60;
                    if (durationFilter === 'short') return minutes < 4;
                    if (durationFilter === 'medium') return minutes >= 4 && minutes <= 20;
                    if (durationFilter === 'long') return minutes > 20;
                    return true;
                });
            }

            // 应用排序
            if (sortFilter === 'popular') {
                videos.sort((a, b) => {
                    const aViews = parseInt(a.views.replace(/[万,]/g, ''));
                    const bViews = parseInt(b.views.replace(/[万,]/g, ''));
                    return bViews - aViews;
                });
            } else if (sortFilter === 'channel') {
                videos.sort((a, b) => a.channel.localeCompare(b.channel, 'zh-CN'));
            }

            filteredVideos = videos;
            renderVideos();
        }

        // 更新内容
        function updateContent() {
            const categoryName = document.querySelector('.category-item.active span').textContent;
            document.querySelector('.toolbar-left h2').textContent = `${categoryName}视频 (${sampleVideos[currentCategory]?.length || 0}个频道)`;
            filterVideos();
        }

        // 添加分类
        function addCategory() {
            const input = document.getElementById('newCategoryInput');
            const categoryName = input.value.trim();
            if (categoryName) {
                alert(`添加分类: ${categoryName}`);
                input.value = '';
            }
        }

        // 打开频道管理器
        function openChannelManager() {
            alert('打开频道分类管理界面');
        }

        // 刷新内容
        function refreshContent() {
            alert('正在刷新内容...');
            document.querySelector('.update-time').textContent = '刚刚更新';
        }

        // 打开视频
        function openVideo(video) {
            alert(`打开视频: ${video.title}`);
        }

        // 初始化应用
        init();
    </script>
</body>
</html>